在前端專案中，CSS 的管理也是很令人頭痛的事情，尤其是很多人要協作的時候看別人的 CSS 通常比看 JS 還要痛苦。

我見過一些一代代傳承下來的專案，那個 CSS 甚至被當作黑盒子一般保護起來沒有人敢改動，畢竟比起邏輯還可以透過自動化測試來確保基本功能，CSS 的影響有時很難追蹤。

使用 Tailwind CSS 得到更好的維護體驗

而我上面提到的 CSS 管理問題，我認為可以透過 Tailwind CSS 的方式得到很大的改善。

首先是可以安心的改動樣式，因為樣式都透過 class 的方式定義在 HTML 上面，當出現樣式需要改動的情況時，可以安心的改動而不用擔心牽一髮而動全身。

而且因為樣式全都透過 Tailwind CSS 提供的 class，遇到特殊需求也有 JIT 的功能可以完全自訂，除了一些極少見的特殊元件需求，專案可以幾乎不寫任何的 CSS 只要不寫 CSS 自然就不用管理 。

改樣式時不用來回對照 class 的樣式內容真的是太開心啦！

透過 config 客製化

而且 Tailwind CSS 也足夠靈活，即使專案的 design system 比較特殊，也可以透過 config 來進行各種定義，不論是顏色、間距、字體甚至動畫都可以進行設定。

這本身也是一個可以供日後參考的依據。

如果需要與其他 CSS 框架搭配使用也沒有任何問題，只要設置 Tailwind CSS 相關 class 的 prefix 就可以無痛混用了。

最常被詬病的缺點

最常被講到的大概就是一大串 class 這件事情吧？

也有人覺得這樣失去 class 複用性，可能想改個卡片樣式卻必須在專案中重複尋找修改，而這個問題我認為也是 Tailwind CSS 這樣的工具現在才紅起來的原因，因為現在前端拜各大框架所賜已經以組件化為開發主流，關注點分離的方式不再像過去暴力的拆成 HTML、CSS、JavaScript。

只要將複用的部分包裝成一個組件，依然可以保有高複用性也避免看到落落長的 class。

雖然在沒有拆成組件的部分依然會看到那一大列的 class，但只要透過一些工具幫忙排列 class，或是搭配像是 clsx 之類的工具，也可以將 class 自己按類型排序，可以大大增加可讀性。

而且還可以避免 class 命名障礙，不但自己省事，也不用煩惱要去通靈同事的命名。